<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
    <div style="width: 98%;height: 4%;display: flex;flex-direction: row;justify-content: flex-end;">
      <el-button style="margin:0 2px;" class="buttonInrRow">设置</el-button>
      <el-button style="margin:0 2px;" class="buttonInrRow" @click="exportreport">导出</el-button>
      <el-button style="margin:0 2px;" class="buttonInrRow" @click="showreportList">报告列表</el-button>
    </div>
    <div style="width: 98%;height: 95%;display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start;">
      <div style="width: 60%;height: 98%;display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
        <div style="width: 100%;height: 30%;background-color:rgb(6,31,51);">
          <div style="width:94%;height: 5%;margin-top: 2%;"><ana-title> <div slot="title">诊断设备概况</div></ana-title></div>
          <div style="width:94%;height: 70%;margin-top: 2%;display: flex;flex-direction: column;flex-wrap: wrap;align-items: flex-start;">
            <div v-for="(value,key,i) in deviceInfo" style="margin-left:5%;height: 25%;font-size: 8pt; color:rgb(6,203,255)">
              {{ key }}：{{ value }}
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 30%;background-color:rgb(6,31,51);">
          <div style="width:94%;height: 5%;margin-top: 2%;"><ana-title> <div slot="title">诊断结果</div></ana-title></div>
          <div style="width:90%;height: 90%;margin-top: 2%;color:rgb(6,203,255);text-align: left;;text-indent:5%;">
            {{ analysisResult }}
          </div>
        </div>
        <div style="width: 100%;height: 35%;background-color:rgb(6,31,51);">
          <div style="width:94%;height: 5%;margin-top: 2%;"><ana-title> <div slot="title">建议采取措施</div></ana-title></div>
          <div style="width:90%;height: 90%;margin-top: 2%;color:rgb(6,203,255);text-align: left;text-indent:5%;">
            {{ actionRecommended }}
          </div>
        </div>
      </div>
      <div style="width: 38%;height: 98%;display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
        <div style="width: 100%;height: 30%;background-color:rgb(6,31,51);">
          <div style="width:94%;height: 5%;margin-top: 2%;"><ana-title> <div slot="title">故障分析</div></ana-title></div>
          <div style="width:95%;height: 90%;margin-top: 2%;color:rgb(6,203,255);text-align: left;text-indent:5%;">
            {{ faultAnaly }}
          </div>
        </div>
        <div style="width: 100%;height: 68%; background-color:rgb(6,31,51);display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;">
          <div style="width:94%;height: 5%;margin-top: 2%;"><ana-title> <div slot="title">诊断数据分析</div></ana-title></div>
          <div style="color:rgb(0,147,231);margin-left: 5%;">故障数据</div>
          <div style="width:94%;height:55%;margin-left:5%;border-color:rgb(0,147,231);border-style:solid ;">
            <div style="margin-left:5%;margin-top: 2%; height: 45%;width: 90%; display: flex;flex-direction: column;flex-wrap: wrap;align-items: flex-start;">
              <div v-for="(value,key,i) in anaInfo" style="height: 20%;font-size: 8pt; color:rgb(6,203,255)">
                {{ key }}：{{ value }}
              </div>
            </div>
            <div style="width:89%;height:35%;margin-left:5%;background-color:#082640" />
          </div>
          <div style="color:rgb(0,147,231);margin-left: 5%;">数据分析</div>
          <div style="width:94%;height:40%;margin-left:5%;border-color:rgb(0,147,231);color:rgb(6,203,255);text-align: left;text-indent:5%; border-style:solid ;">
            {{ dataAnaly }}
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AnaTitle from '@/components/Mytitle/AnaTitle'
import { getreportList, getreportContent } from '../../api/diagnosisReport.js'
import axios from 'axios'
export default {
  components: {
    AnaTitle
  },
  data() {
    return {
      param: {
        valvehallId: 1,
        pageCurrent: 0,
        pageSize: 20
      },
      id: '123',
      time: '',
      deviceInfo:
        { '设备': '换流阀', '场站名称': '', '电压等级': '', '位置': '', '时间': '', '设备型号': '', '生产厂家': '' },
      anaInfo:
        { '发生时间': '', '处理日期': '', '直流电流': '', '进阀压力': '', '进阀水温': '', '发生系统': '', '输送功率': '', '触发角': '', '出阀压力': '', '出阀水温': '' },
      eventId: '117001',
      analysisResult: '',
      actionRecommended: '',
      faultAnaly: '',
      dataAnaly: ''
    }
  },
  watch: {
    $route: {
      handler(val, oldval) {
        console.log(val)// 新路由信息
        console.log(oldval)// 老路由信息
      },
      // 深度观察监听
      deep: true
    }
  },
  mounted() {
    console.log('路由', this.$route.query)
    this.id = this.$route.query.id
    this.time = this.$route.query.time
    // this.reportContent()
    console.log('id', this.id, 'time', this.time)
    if (typeof (this.id) === 'undefined' && typeof (this.time) === 'undefined') {
      console.log('gggg')
      this.reportList()
    } else {
      this.reportContent()
    }
  },
  created() {
    console.log('创建了')
    // this.reportList()
    // console.log("id",this.id,'time',this.time)
    // this.reportContent()
  },
  methods: {
    showreportList() {
      this.$router.push({ path: '/PageTest/showlist' })
    },
    // 文件导出
    exportreport() {
      const forms = new FormData()
      forms.append('eventId', this.id)
      forms.append('time', this.time)
      axios({
        url: process.env.VUE_APP_BASE_API + '/cv/faultReport/reportExport',
        method: 'post',
        data: forms,
        responseType: 'blob',
        headers: {
          'Content-Type': 'multipart/form-data'// 含有附件的表单提交的Content-Type
          // 'Content-Type': 'application/x-www-form-urlencoded'//普通表单提交的Content-Type
        }
      }).then(res => {
        if (window.navigator.msSaveBlob) {
          // IE以及IE内核的浏览器
          try {
            window.navigator.msSaveBlob(res.data, file.name) // response为接口返回数据，这里请求的时候已经处理了，如果没处理需要在此之前自行处理var data = new Blob([response.data]) 注意这里需要是数组形式的,fileNm就是下载之后的文件名
            // window.navigator.msSaveOrOpenBlob(response, fileNm);	//此方法类似上面的方法，区别可自行百度
          } catch (e) {}
        } else {
          // 在headers中截取filename
          var filename = res.headers// 下载后文件名

          filename = filename['content-disposition']
          filename = filename.split(';')[1].split('fileName=')[1]
          filename = decodeURIComponent(filename)
          // var filename = this.eventId
          console.log(filename)

          var blob = new Blob([res.data])
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = filename
          // 此处也可以将filename写死 "filename.xlsx"
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        }
      }).catch(err => {
        console.log(err)
      })
      // 需要添加等待框
      console.log('111111111111111111111111111111')

      this.$message({
        type: 'success',
        message: '添加成功'
      })
    },
    // 页面赋值
    setData(contextData) {
      this.dataAnaly = contextData.analysis.faultcause
      this.deviceInfo.电压等级 = contextData.overview.voltageclass
      this.deviceInfo.场站名称 = contextData.overview.stationname
      this.deviceInfo.位置 = contextData.overview.location
      this.deviceInfo.时间 = contextData.overview.time
      this.deviceInfo.生产厂家 = contextData.overview.manufacturer
      this.anaInfo.发生时间 = contextData.analysis.faultdata.occurrencetime
      this.anaInfo.处理日期 = contextData.analysis.faultdata.handlingtime
      this.anaInfo.直流电流 = contextData.electricity
      this.anaInfo.进阀压力 = contextData.inPressure
      this.anaInfo.进阀水温 = contextData.inWaterTemp
      this.anaInfo.发生系统 = contextData.analysis.faultdata.faultsystem
      this.anaInfo.输送功率 = contextData.power
      this.anaInfo.触发角 = contextData.triggerAngle
      this.anaInfo.出阀压力 = contextData.outPressure
      this.anaInfo.出阀水温 = contextData.outWaterTemp
      this.analysisResult = contextData.faultposition
      this.actionRecommended = contextData.handingmethod
      this.faultAnaly = contextData.description
    },
    // 请求报告内容
    reportContent() {
      getreportContent(this.id, this.time).then(response => {
        const contextData = response.data
        this.setData(contextData)
        console.log('报告内容请求', contextData)
      })
    },
    // 请求列表，并拿第一条
    reportList() {
      getreportList(this.param).then(response => {
        console.log('id', this.id, 'time', this.time)
        this.id = response.data.records[0].id
        this.time = response.data.records[0].time
        getreportContent(response.data.records[0].id, response.data.records[0].time).then(response => {
          const contextData = response.data
          console.log(response)
          this.setData(contextData)
        })
      })

      console.log('id', this.id, 'time', this.time)
    }

  }
}
</script>

<style lange="scss" scoped>
.buttonInrRow {
  color: #fff;
  font-size: 12px;
  padding: 2px 12px;
  font-size: 12px;
  border-radius: 3px;
  background-color: transparent !important;
  border-color: #93dcfe;
}
</style>
